<template>
  <div class="card-area-component">
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
      <div class="card-horizontal-container">
        <card v-for="(item, index) in data" :key="index" :cardData="item" @clickCard="clickCard"/>
        <div class="add-button-big" @click="jumpToAddPage(cardType)"></div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import card from "./card";
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    cardType: {
      type: String
    }
  },
  components: {
    card
  },
  methods: {
      clickCard(data) {
          this.$emit('clickCard', data);
      },
      jumpToAddPage(cardType) {
      wx.navigateTo({
        url: `/pages/cardManager/main?add=true&cardType=${cardType}`
      });
      }
  }
};
</script>

<style lang="less">
.card-horizontal-container {
    display: flex;
    align-items: center;
    height: 330rpx;
}
.add-button-big {
    width: 45px;
    height: 45px;
    background:url(../../../../static/images/index/add-button-big.png) center center no-repeat;
    background-size: cover;
    flex: none;
    margin-left: 15px;
}
</style>